<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
    <style>
        .parent {
            display: flex;
            width: 700px;
            flex-wrap: wrap;
            margin: 0 auto;
        }

        .xlb-alert {
            background-color: skyblue;
            width: 200px;
            height: 300px;
            margin-right: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="parent">
            <!-- :action="changeEvent" -->
            <xlb-alert v-for="item,index in content" :html="item" @changeEvent="changeEvent" :key="'xlb'+index">
            </xlb-alert>            
            <xlb-alert1>
                <!--slot里面的内容变量只跟父元素有关-->
                <p>          
                    <!-- {{abc}}           -->
                    {{content[3].info}}
                    <!-- 就是考虑到 -->
                </p>
            </xlb-alert1>
        </div>


    </div>
    <script>
        Vue.component('xlb-alert', {
            props: ['html'],
            template: `<div class="alert xlb-alert" @click="changeEvent1">
            <h1>温馨提示</h1>
            <div class="content">
            <p>{{html.info}}</p>
            </div>
        </div>`,
            methods: {
                changeEvent1: function ( ) {
                    //@click="$root.changeEvent(html)"
                    this.$emit('changeEvent', this.html);
                }
            }
        })

        Vue.component('xlb-alert1',{
            props:[""],
            template:`<div class="alert">
            <h1>温馨提示</h1>
            <div class="content">
            <slot></slot>
            </div>
            <div>`,
            data:function(){
                return {
                    abc:'abc123'
                }
            }

        })


        let app = new Vue({
            el: "#app",
            data: {
                content: [
                    { id: 2, info: '网文作者群，辰东称大神，十年出几篇，越写越扯淡。《神墓》算佳作，《长生》最脑残，《遮天》还不错，《完美》未读完。(๑• . •๑)' },
                    { id: 3, info: '为何未读完，因为太逆天：请假很逆天，感冒又停电；拖更很逆天，情绪养几天；月初很逆天，月票不要断;月底很逆天，大家快支援；剧情最逆天，吹牛无下限；各种神功各种夸，各种反派各种杀，各种路人全脑残，各种俊杰战力渣。' },
                    { id: 1, info: '路边乞丐天天见，双眼一眨天地变；路边野花天天见，一开便是一纪元；路边石头天天见，敲开神秘圣灵现；路边丹药天天见，吃完跺脚宇宙颤。捡到烂铁一打磨，上古仙器妥妥的；捡到破纸一大叠，上古神功杀人多。(๑• . •๑)' },
                    { id: 4, info: '树上拆了凤凰窝，山上麒麟煮一锅，一天偶遇水晶宫，神龙吓得全哆嗦。拳打南山敬老院，脚踢北海幼儿园，打哭鼻子不算完，再把征服唱一遍。打架先捕垫，前奏写七天，内容何其多，狠话加放电。拳脚未开动，路人全吓瘫，这边先解说，那边又发言，写了一个月，剧情无进展。更新速度慢，水分捏不干，投票起外号，公认辰水扁。' }
                ]
            },
            methods: {
                changeEvent: function (item) {
                    console.log(item)
                }
            }
        })
    </script>
</body>

</html>